iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

React自我學習心得30天~系列 第 24

Day24 React專案資料夾分類方式

  • 分享至 

  • xImage
  •  

React本身並沒有特別限定專案資料夾的設定方式,但這邊建議可以朝以下兩種方式著手:

依照功能或所屬單元類別建立資料夾

將CSS、JS依照各功能或不同單元頁去建立資料夾。

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

依照檔案類型分類

可以將相近的檔案放在一起,方便後續整理。

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

若是使用昨天的create-react-app開發的話,資料夾設定分別如下:

  • public:放打包前html檔的資料夾。
  • src:開發程式實用到的資料夾,可以在裡面繼續分類細部資料夾。
  • node_modules:用 npm/yarn 所載下來的套件預設會放在此資料夾。

上一篇
Day23 Portal
下一篇
DAY25 在React中加入CSS
系列文
React自我學習心得30天~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言